<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姜启航">
    <title></title>
    <style>
    nav{
        width: 100%;
        height: 50px;
        background-color: #ccc;
          display: flex;
        justify-content: space-around; 
    }   
    ul{
        margin: 0;
        padding: 0;
        /* width: 1200px; */
        list-style: none;
        margin: 0 auto;
        background-color: #aaa;
       
    }
    li{
        float: left;
        line-height: 50px;
    }
    a{
        text-decoration: none;
        color: red;
    }
   .gg{
        width: 150px; 
        border: 1px solid #aaa;
   }
    .gg li{
         width: 150px; 
    }
    .gg ul{
         display: none;
    }
    </style>
</head>
<body>

    <nav>
        <ul>
            <li class="gg gongsi"><a class="li-a" href="#">公司简介</a>
            <ul class="gg-ul">
                <li><a href="#">概况介绍</a></li>
                <li><a href="#">发展历史</a></li>
                <li><a href="#">公司实力</a></li>
            </ul>
            </li>
            <li class="gg chanpin"><a class="li-a" href="#">产品介绍</a>
            <ul class="gg-ul">
                <li><a href="#">软件研发</a></li>
                <li><a href="#">软件教育</a></li>
                <li><a href="#">天使投资</a></li>
            </ul>
            </li>
            <li class="gg lianxi"><a class="li-a" href="#">联系我们</a>
            <ul class="gg-ul">
                <li><a href="#">公司地址</a></li>
                <li><a href="#">联系方式</a></li>
                <li><a href="#">投资加盟</a></li>
            </ul>
            </li>
            <li class="gg zhaopin"><a class="li-a" href="#">人才招聘</a>
            <ul class="gg-ul">
                <li><a href="#">java招聘</a></li>
                <li><a href="#">HTML5招聘</a></li>
                <li><a href="#">PHP招聘</a></li>
            </ul>
            </li>
        </ul>
    </nav>



    <script src="./jquery.js"></script>
</body>
</html>


<script>
    // var index=0;
    $('nav li').hover(function (ev) {

        $(this).find('.gg-ul').css('display', 'block');
        $('.li-a').css('color','orange').siblings().css('color','red')
    }, function () {
        $(this).find('.gg-ul').css('display', 'none');
        $('.li-a').css('color','red').siblings().css('color','orange')
    });


    // $('li').each(function(index){
    //     $(this).mousemove(function(ev){
    //          $('li').eq(index).css('display', 'block');
    //           $('.li-a').eq(index).css('color','orange').siblings().css('color','red');
    //     })
    //         $(this).mouseout(function(ev){
    //          $('li').eq(index).css('display', 'none');
    //           $('.li-a').eq(index).css('color','red')
    //     })
       
    // })

</script>